<main class="lyear-layout-content">
      
    <div class="container-fluid p-t-15">
  
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header"><h4>消费统计</h4></div>
            <div class="card-body">
              <!-- echarts 容器 -->
              <div id="main" style="height:60em;"></div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    
  </main>
  
  <script src="/static/echarts/echarts.min.js"></script>
  <script type="text/javascript">
    var chartDom = document.getElementById('main')
  
    //echarts图表初始化
    var myChart = echarts.init(chartDom);
  
    var option;
  
  
    // 更新事件
    myChart.on('updateAxisPointer', function (event) {
      
      const xAxisInfo = event.axesInfo[0];
      
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: 'pie',
            label: {
              formatter: '{b}: {@[' + dimension + ']} ({d}%)'
            },
            encode: {
              value: dimension,
              tooltip: dimension
            }
          }
        });
      }
    });
  
  
    //echarts图表插件进行渲染
    option && myChart.setOption(option);
  
    $.ajax({
      url:`{:url('admin/analysis/record')}`,
      type:'post',
      data:{action:'record'},
      dataType:'json',
      success:function(success)
      {
        //给图表进行赋值
        option = {
          legend: {},
          tooltip: { //提示框
            trigger: 'axis',  //坐标轴触发
            showContent: true, //是否显示提示框浮层
          },
          dataset: { //原始数据
            source: success.data
          },
          xAxis: { type: 'category' }, //X轴  类目轴
          yAxis: { gridIndex: 0 },  //Y轴
          grid: { top: '55%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {  //高亮状态
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@2012} ({d}%)'  //{b}分类 {@2012}默认年份 ({d}%) 百分比
              },
              encode: {
                itemName: 'record',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        }
  
        myChart.setOption(option);
  
      }
    })
  </script>